<template>
  <div class="checkSwitch">
    <el-card class="item imgBox" v-if="!refundSwitch" style="min-width: 700px">
      <img src="@/assets/imgs/setting/check.png" />
      <div class="hint1">您还没有退款审核功能，是否开通？</div>
      <div class="hint2">
        开启退款审核后，金额达到免审核上限的所有退款申请都需要进行审核。
      </div>
      <div>
        <el-button
          type="primary"
          round
          class="btnIcon"
          @click="goCode('SMS_BUSINESS_REFUND_AUDIT_SWITCH', '开通')"
          >确认开通</el-button
        >
      </div>
    </el-card>
    <el-card class="item textWrap">
      <div v-if="refundSwitch">
        <span class="bigtitle" style="font-size: 20px; font-weight: bold"
          >退款审核功能</span
        >
        <el-switch
          :value="true"
          active-text="已开通"
          style="float: right; margin-top: 5px"
          @change="goCode('SMS_BUSINESS_REFUND_AUDIT_SWITCH', '关闭')"
        ></el-switch>
        <div style="margin-top: 25px">
          免审核金额上限：<span style="color: #03bfc6; font-size: 14px">{{
            exemptAmount
          }}</span
          >元
        </div>
        <el-divider></el-divider>
      </div>
      <div class="title">退款审核使用指南</div>
      <div>
        退款审核功能适用于财务/内控人员需要审核退款请求的场景。开启退款审核开关后，所有拥有退款权限的成员发起的退款请求，都需经过系统管理员或拥有退款审核权限的成员用户审核才能发起退款。所以，你需要给相应职责的成员分别分配退款权限和退款审核权限，确保有成员可以发起退款、有成员可以进行审核。
      </div>
      <img src="@/assets/imgs/setting/refund.png" class="img" />
      <div>一、开启退款审核功能</div>
      <div>
        使用管理员账号登录云尘付管理平台，进入对应的应用，点击「设置」-「退款审核开关」开通退款审核功能。
      </div>
      <div>二、成员权限</div>
      <div>1、退款发起人</div>
      <div>
        进入「企业面板」-「角色权限」，选择相应角色进行编辑。
        <br>
        应用权限：勾选【商户】-【交易查询】、【交易】-【支付订单】【退款订单】
        <br>
        操作权限：勾选【退款】
      </div>
      <div>2、退款审核人</div>
      <div>
        进入「企业面板」-「角色权限」，选择相应角色进行编辑。
        <br>
应用权限：勾选【商户】-【交易查询】、【交易】-【退款订单】【退款审核】
<br>
操作权限：勾选【退款审核】
<div class="label_">注：【退款订单】用于查询退款结果。</div>

      </div>
    </el-card>
    <el-dialog
      class="aaa"
      :visible.sync="visible"
      :show-close="false"
      :close-on-click-modal="false"
      width="30%"
    >
      <div class="dialogText">
        <i class="el-icon-warning"></i>
        <el-form :model="form" :rules="formRules" ref="switchForm">
          <div>
            <div class="dialogTitle">{{ innerText }}</div>
            <div v-show="paramRefundSwitch">
              <div class="dialogHint">
                <div>开启后，申请退款的订单需要进行二次退款。</div>
                <div>审核位置：交易-退款审核</div>
                <div>
                  请确保对应人员有退款审核权限，避免造成无人审核的情况。
                </div>
              </div>
              <br />
              <!-- <div class="explain">免审核金额上限</div> -->
              <el-form-item prop="amount" label="免审核金额上限">
                <el-input v-model="form.amount" class="width274">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </div>
            <!-- <div class="explain">
              我们将发送一条验证短信至您186****8900的手机
            </div>
            <el-form-item prop="checkCode">
              <div class="codeBox">
                <el-input v-model="form.checkCode" class="width274"> </el-input>
                <div class="codeBtn">获取验证码</div>
              </div>
            </el-form-item> -->
          </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelRefundSwitch()" style="width: 120px"
          >取消</el-button
        >
        <el-button type="primary" @click="setRefundSwitch" style="width: 120px"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <codeDialogVue
      codeId="7"
      :type="codeType"
      :codeDialog.sync="codeDialog"
      @codeState="codeStateFn"
    />
  </div>
</template>

<script>
import { isAmount } from "@/utils/validate";
import { getUserInfo} from "@/utils/public";
import codeDialogVue from "@/components/codeDialog.vue";

export default {
  name: "settingCheckSwitch",
  components: {
    codeDialogVue,
  },
  data() {
    const checkLimitAmount = (rule, value, callback) => {
      if (value.substr(0, 1) == "." || value.charAt(value.length - 1) == ".") {
        callback(new Error("请输入有效的金额"));
      } else {
        if (value >= 0 && value <= 1000000) {
          if (!isAmount(value)) {
            callback(new Error("金额必须为整数或者保留两位小数"));
          }
          callback();
        } else {
          callback(new Error("金额必须为0~1000000之间"));
        }
      }
    };
    return {
      codeItem: "",
      codeType: "",
      codeDialog: false,
      visible: false,
      refundSwitch: false,
      exemptAmount: "",
      innerText: "",
      form: {
        amount: "0.00",
        checkCode: "",
      },
      paramRefundSwitch: true,
      formRules: {
        amount: [
          { required: true, validator: checkLimitAmount, trigger: "change" },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    this.$http.get("/api/merchant/memberbase/getMemberBase").then((res) => {
      if (res.code === "0000") {
        this.refundSwitch = res.data.refundAuditSwitch;
        this.exemptAmount = res.data.fmtExemptAmount;
        this.innerText = res.data.refundAuditSwitch
          ? "关闭退款审核功能认证"
          : "开通退款审核功能认证";
      }
    });
  },
  watch: {
    "$store.state.testLine": {
      handler() {
        if(this.$route.name==this.$options.name){
          this.$http.get("/api/merchant/memberbase/getMemberBase").then((res) => {
          if (res.code === "0000") {
            this.refundSwitch = res.data.refundAuditSwitch;
            this.exemptAmount = res.data.fmtExemptAmount;
            this.innerText = res.data.refundAuditSwitch
              ? "关闭退款审核功能认证"
              : "开通退款审核功能认证";
          }
        });
        }
      },
    },
    deep: true,
  },
  methods: {
    getUserInfo,
    codeStateFn(val) {
      if (val) {
        if (this.codeItem == "开通") {
          this.confirmOpen();
        } else {
          this.confirmClose();
        }
      }
    },
    goCode(val, item) {
      if(getUserInfo().checkFlag){
        if (item == "开通") {
          this.confirmOpen();
        } else {
          this.confirmClose();
        }
        }else{
          this.codeType = val;
      this.codeItem = item;
      this.codeDialog = true;
        }
    },
    cancelRefundSwitch() {
      this.visible = false;
      this.form = {
        amount: "0.00",
        checkCode: "",
      };
      this.paramRefundSwitch === true ? false : false;
    },
    confirmOpen() {
      this.paramRefundSwitch = true;
      this.visible = true;
      this.$refs.switchForm.clearValidate(["amount"]);
      this.form = {
        amount: "0.00",
        checkCode: "",
      };
    },
    confirmClose() {
      this.paramRefundSwitch = false;
      this.visible = true;
      this.form = {
        amount: "0.00",
        checkCode: "",
      };
    },
    queryMemberInfo() {
      this.$http.get("/api/merchant/memberbase/getMemberBase").then((res) => {
        if (res.code === "0000") {
          this.refundSwitch = res.data.refundAuditSwitch;
          this.exemptAmount = res.data.fmtExemptAmount;
          this.innerText = res.data.refundAuditSwitch
            ? "关闭退款审核功能认证"
            : "开通退款审核功能认证";
        }
      });
    },
    setRefundSwitch() {
      this.$refs.switchForm.validate((valid) => {
        if (valid) {
          this.$http
            .post(
              `/api/merchant/memberbase/switchRefundAudit`,
              {
                switchFlag: this.paramRefundSwitch,
                exemptAmount: this.form.amount,
                checkCode: this.form.checkCode,
              }
            )
            .then((res) => {
              this.visible = false;
              if (res.code === "0000") {
                this.queryMemberInfo();
              }
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.checkSwitch {
  display: flex;
  .item {
    img {
      width: 650px;
      height: 411px;
    }
  }
  .imgBox {
    text-align: center;
    width: 60%;
    padding-top: 100px;
    .hint1 {
      font-size: 16px;
      font-weight: 600;
      color: #4f595f;
      margin-top: 40px;
      margin-bottom: 12px;
    }
    .hint2 {
      color: #869daa;
    }
    .btnIcon {
      width: 318px;
      height: 50px;
      font-size: 14px;
      border-radius: 35px;
      margin: 40px 0;
      &:first-child {
        margin-right: 30px;
      }
    }
  }
  .textWrap {
    flex: 1;
    margin-left: 20px;
    color: #4f595f;
    padding: 0 20px 20px;
    text-align: justify;
    line-height: 22px;
    .title {
      font-size: 16px;
      font-weight: 500;
      color: #1d1c1c;
    }
    div {
      margin-top: 20px;
    }
    .label_ {
      color: #25b5d9;
      margin-left: 0px;
    }
    .img {
      width: 508px;
      height: 221px;
      margin: 40px 0;
    }
  }
  .dialogText {
    display: flex;
    .dialogTitle {
      font-size: 18px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      line-height: 24px;
    }
    .dialogHint {
      color: rgba(0, 0, 0, 0.65);
      line-height: 22px;
      margin-top: 12px;
    }
    .explain {
      font-size: 14px;
      margin-bottom: 10px;
      margin-top: 30px;
    }
    .width274 {
      width: 274px;
    }
    .codeBox {
      display: flex;
    }
    .codeBtn {
      width: 132px;
      height: 32px;
      background: #25b5d9;
      border-radius: 0px 4px 4px 0px;
      text-align: center;
      line-height: 32px;
      color: #ffffff;
      cursor: pointer;
    }
  }
  :deep(.el-dialog__wrapper) {
    .el-dialog__header .aaa {
      padding: 0;
    }
    .el-icon-warning {
      font-size: 18px;
      color: #faad14;
      margin-top: 3px;
      margin-right: 17px;
    }
  }
  :deep(.el-dialog) {
    border-radius: 16px;
  }
}
</style>
